<template>
  <div class="billDetail">
    <div class="headCrm mlcbg">
        <p class="billHead">
          <span class="el-icon-arrow-left" @click="returnPage"></span>
          <span class="headFont">申请单详情</span>
        </p>
    </div>
    <div class = "contentCrm">
            <div class="billDetailList">
                <ul>
                    <li>
                      <p>申请类型</p>
                      <span>{{billDetail.formInfo.typeName}}</span>
                    </li>
                    <li>
                      <p>申请单编码</p>
                      <span>{{billDetail.formInfo.code}}</span>
                    </li>
                    <li>
                      <p>申请日期</p>
                      <span>{{billDetail.formInfo.sys_created_time}}</span>
                    </li>
                    <li>
                      <p>仓库</p>
                      <span>{{billDetail.formInfo.warehouseName}}</span>
                    </li>
                </ul>
                <ul class="goods-list" v-for="(item,index) in billDetail.productsInfo" :key='index'>
                  <li>
                    <p>配件名称</p>
                    <span>{{item.productName}}</span>
                  </li>
                  <li>
                    <p>数量</p>
                    <span>{{item.product_num}}</span>
                  </li>
                  <li>
                    <p>金额</p>
                    <span>￥{{item.total_price || 0}}</span>
                  </li>
                </ul>
            </div>
    </div>
  </div>


</template>

<script>
export default {
  name: 'billDetail',
  data() {
    return {
      billDetail: {
        formInfo:[],
        productsInfo:[]
      },
    };
  },
  mounted: function(){
   this.getDetailData(localStorage.getItem("detailId"))
  },
  methods: {
    returnPage:function(){
          console.log('aa')
          this.$router.push({
            path:'/parts'
          })  
      },
      getDetailData:function(id){
        // this.loading = true;
        let _this = this;
        this.$fetch(this.$root.domainIp+'repairman/warehouse/'+id)
        .then((response) => {
            // this.loading = false;
            if(response.code == 0){
                _this.billDetail = JSON.parse(this.decrypt(response.data));
                console.log(_this.billDetail)
            }else {
                _this.$message({
                    message:(response.message || '请检查网络是否连接'),
                    center: true
                });
            }
        }).catch(function (error) {
            // this.loading = false;
            console.log(error);
            _this.$message({
                message:('请检查网络是否连接'),
                center: true
            });
        });
      }
  },
 
};
</script>

<style scoped>
/* headCrm */
  .headCrm{
        width:100%;
  }
  .billHead{
    text-align:center;
    font-size: 0.33rem;
    color:#fff;  
    padding:0.33rem 0; 
    clear: none; 
  }
  .el-icon-arrow-left{
      position:absolute;
      left: 0.3rem;
      top:0.2rem;
      font-size: 0.6rem;
  }


/* contentCrm */
.contentCrm{
  color:#646464;
}
.contentCrm p {
  font-size: 0.33rem;
}
.text {
  font-size: 0.33rem;
}

.billDetailList ul li p{
    width:30%;
    float: left;
}
 .billDetailList ul li span{
    float: right;
  }

.billDetailList ul li {
  /* margin: 0.26rem 0rem; */
  /* border-bottom:0.01rem solid #E6E6E6; */
  /* margin: 0.44rem 0rem; */
    /* border-bottom:0.01rem solid #E6E6E6; */
  /* padding: 0.16rem 0; */
      padding: 0.38rem 0rem;
}
.billDetailList ul {
  margin: 0rem 0.3rem;
  font-size: 0.33rem;
}
.login-btn.mlcbg{
    width: 100%;
}
.login-btn.mlcbg p{
  color:#fff;
}

.afultText{
  line-height: 0.55rem;
}
.spaceText{
    /* height: 0.6rem; */
    /* background-color: #E6E6E6; */
    margin-top: 0.3rem;
    /* width: 100%; */
    border-bottom:0.04rem solid #E6E6E6;
}
.goods-list{
  border-top: 0.04rem solid #E6E6E6;

}

</style>
